<template>
  <div class="MaterialDetails">
    <!-- banner部分开始 -->
    <div class="banner">
      <div class="w banner-text pl-10" style="margin: 0px auto">
        <h2>产品需求量</h2>
        <div class="banner-span-text clearfix">
          <div class="f-left Num-text1">
            <!-- <span>6398</span> -->
            <countTo class="num" :startVal="startVal" :endVal="endVal" :duration="3000"></countTo>
          </div>
          <div class="f-left clearfix Num-text2">
            <div class="f-left">其他待解决需求</div>
            <div class="f-left">
              <countTo class="num" :startVal="startVal" :endVal="endVal1" :duration="1000"></countTo>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- banner部分结束 -->

    <!-- 导航栏开始 -->
    <breadcrumb SecondcrumbsUrl="/MaterialDemand" :ThreecrumbsTitle="infoList.demandProductName" SecondcrumbsTitle="产品需求"></breadcrumb>

    <!-- <nav class="w">
      <div class="nav-box">
        <a-breadcrumb separator=">" class="nav-text">
          <a-breadcrumb-item>首页</a-breadcrumb-item>
          <a-breadcrumb-item>产品需求</a-breadcrumb-item>
          <a-breadcrumb-item
            ><a href="#" class="nav-Detail">{{
              infoList.demandProductName
            }}</a></a-breadcrumb-item
          >
        </a-breadcrumb>
      </div>
    </nav> -->
    <!-- 导航栏结束 -->

    <!-- 主要部分开始 -->
    <div class="content clearfix w" ref="materDetail">
      <div class="main-left clearfix f-left">
        <div class="expire pl-30">需求详情</div>
        <!-- <div class="content-top clearfix">
           <div class="f-right" @click="addAttention">
            <a-icon type="heart" two-tone-color="#606266" />
            关注
            （<span>{{ count ? count : '0' }}</span>）
          </div> -->

        <!-- <div class="f-right" style="color:#EB2F96" @click="updateAttention">
            <a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96" />
            关注
            （<span>{{ count}}</span>）
          </div> 
        </div> -->

        <div class="content-top clearfix">
          <div v-show="!this.isMyProduct">
            <div v-if="ISguanzhu" style="color: red;cursor:pointer" class="f-right" @click="attentionEnt">
              <i class="iconfont icon-guanzhuon"></i>
              已关注（<span>{{ EntZZSNum }}</span>）
            </div>
            <div v-if="!ISguanzhu" class="f-right" style="cursor:pointer" @click="attentionEnt">
              <i class="iconfont icon-guanzhu"></i>
              关注（<span>{{ EntZZSNum }}</span>）
            </div>
          </div>
        </div>

        <div class="content-title">
          <h2>{{ infoList.demandProductName }}</h2>
          <span class="mr-40">发布时间：{{ infoList.createTime }}</span>
          <span>来源：本站</span>
        </div>

        <div class="table-box">
          <table border="1" bordercolor="#e4e7ed">
            <tr>
              <th>需求名称</th>
              <td>
                {{
                  infoList.demandProductName ? infoList.demandProductName : "暂无"
                }}
              </td>
            </tr>
            <tr>
              <th>产品同义名称</th>
              <td>
                {{
                  infoList.productSynonymName
                    ? infoList.productSynonymName
                    : "暂无"
                }}
              </td>
            </tr>
            <tr>
              <th>产品类别</th>
              <td>
                {{
                  infoList.productOneCategoryName
                    ? infoList.productOneCategoryName
                    : "暂无"
                }}-{{infoList.productOneCategoryName? infoList.productSecondCategoryName
                    : "暂无"}}
              </td>
            </tr>
            <tr>
              <th>规格型号</th>
              <td>{{ infoList.productSpec ? infoList.productSpec : "暂无" }}</td>
            </tr>
            <tr>
              <th>概述</th>
              <td>
                {{ infoList.demandDetails ? infoList.demandDetails : "暂无" }}
              </td>
            </tr>
            <tr>
              <th>预算价格</th>
              <td>{{ infoList.price ? infoList.price + "元" : "暂无" }}</td>
            </tr>
          </table>
        </div>

        <div class="content-btn" v-show="!this.isMyProduct">
          <a-button class="btn-box" type="primary" @click="showModal">我可供应</a-button>
        </div>
      </div>
      <div class="main-right f-right">
        <div class="right-top">
          <div class="expire">企业信息</div>
          <div class="company clearfix">
            <div class="f-left">{{ BaseList.entName }}</div>
            <div class="f-right img">
              <img v-if="BaseList.entLogo !='' || BaseList.entLogo !=null" :src="getImageUrl(BaseList.entLogo)" alt="" />
              <img v-else src="@/assets/images/defult_img.png" alt />
            </div>
          </div>
          <div class="CompanyInformation">
            <ul>
              <li>
                网址：<a :href="BaseList.webAddress" style="color: #606266" target="_blank">
                  {{ BaseList.webAddress ? BaseList.webAddress : "暂无" }}
                </a>
              </li>

              <li>
                联系人：<span>{{
                  infoList.contacts ? infoList.contacts : "暂无"
                }}</span>
              </li>
              <li>
                手机号码：<span>{{ infoList.phone ? infoList.phone : "暂无" }}</span>
              </li>
              <li>
                邮箱：<span>{{ infoList.email ? infoList.email : "暂无" }}</span>
              </li>
              <li>
                地址：<span>{{
                  BaseList.entAddress ? BaseList.entAddress : "暂无"
                }}</span>
              </li>
            </ul>
          </div>
        </div>
        <a-button type="primary" block @click="Myneed">我要发布需求</a-button>
        <a-button type="primary" block @click="Myproduct">我要发布产品</a-button>
        <div class="right-footer">
          <div class="timeOut clearfix">
            <div class="f-left time-text">
              <img src="../image/time.png" alt="" />
              <span>有效时间</span>
            </div>
            <div class="line f-right"></div>
          </div>
          <div class="mr-10 ml-10 clearfix">
            <div v-if="infoList.expirationDate" class="f-left" style="width: 80px">
              {{ createTime[0] }}
            </div>
            <div v-if="infoList.expirationDate" class="f-right" style="width: 80px">
              {{ infoList.expirationDate }}
            </div>
            <div v-if="!infoList.expirationDate" style="color: #0da9b0">
              长期有效
            </div>
          </div>
          <div class="mr-10 ml-10 mt-10">
            <a-progress :stroke-color="{
                '0%': '#108ee9',
                '100%': '#87d068',
              }" :percent="percent" :showInfo="false" />
          </div>
        </div>
      </div>
    </div>
    <!-- 主要部分结束 -->

    <!-- 弹框 -->
    <a-modal okText="提交" :closable="false" :visible="visible" :confirm-loading="confirmLoading" @ok="submit" @cancel="handleCancel" :bodyStyle="{ color: '' }">
      <div class="top-title">{{ infoList.demandProductName }}</div>
      <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 14 }" class="mt-30">
        <a-form-item label="联系人">
          <a-input v-decorator="[
              'userName',
              {
                rules: [{ required: true, message: '请输入联系人' }],
              },
            ]" />
        </a-form-item>
        <a-form-item label="手机号码">
          <a-input v-decorator="[
              'phone',
              {
                rules: [
                  { required: true, message: '请输入手机号码' },
                  {
                    pattern: /^1[3456789]\d{9}$/,
                    message: '手机号码格式不正确',
                  },
                ],
              },
            ]" />
        </a-form-item>
        <!-- <a-form-item v-bind="formItemLayout" label="验证码">
          <a-row :gutter="8">
            <a-col :span="12">
              <a-input placeholder="请输入验证码" v-decorator="[
                  'verifyCode',
                  {
                    rules: [{ required: true, message: '请输入验证码' }]
                  },
                ]" />
            </a-col>
            <a-col :span="12">
              <a-button style="width: 100%" :disabled="IsDisabled" @click="getCode" type="primary">
                {{ sec == 0 ? "获取用户验证码" : "还有" + sec + "秒" }}
              </a-button>
            </a-col>
          </a-row>
        </a-form-item> -->
        <a-form-item v-bind="formItemLayout" label="电子邮箱">
          <a-input v-decorator="[
              'email',
              {
                rules: [
                  {
                    pattern: /\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}/,
                    message: '邮箱格式不正确',
                  },
                ],
              },
            ]" />
        </a-form-item>
        <a-form-item v-bind="formItemLayout" label="已发布产品">
          <a-select v-model="value" mode="multiple" style="width: 100%" placeholder="请选择" option-label-prop="label">
            <a-select-option v-for="(item, index) in selectType" :key="index" :value="item.id+':'+item.productName" :disabled="item.disabled" :label="item.productName" :title="item.productName">{{ item.productName }}</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item label="附言" name="remark">
          <a-input :rows="5" type="textarea" v-decorator="['textarea']" />
        </a-form-item>
      </a-form>
    </a-modal>
  </div>
</template>

<script>
import countTo from "vue-count-to";
import { getToken,setIsSign } from "@/utils/auth";
import {
  GetInfo,
  GetBaseInfo,
  getVerifiyCode,
  addMessage,
  getMaterialMicroStatistics,
  addAttention,
  updateAttention,
  getProductList,
} from "@/apis/MaterialsDemand";
import { getEntBaseInfo } from "@/apis/user/EntBaseInfo";
import {
  getAttentionTotalByObjId,
  getIsAttentionEnt,
  getentBaseInfo,
} from "@/apis/EntBase";
import breadcrumb from "@/components/breadcrumb/breadcrumb.vue";
import store from "@/store";
import { isLogin } from '@/utils';
export default {
  data() {
    return {
      IsDisabled: false,
      isMyProduct: false,
      ISguanzhu: false, //是否关注
      startVal: 0,
      endVal: 6398,
      endVal1: 85,
      EntZZSNum: 0, //关注数
      infoList: {},
      BaseList: {},
      currentEnt: {},
      id: "",
      entId: "",
      visible: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      formLine: {},
      formItemLayout: {
        labelCol: { sm: { span: 6 } },
        wrapperCol: { sm: { span: 14 } },
      },
      // 倒计时的秒数
      sec: 0,
      selectType: [],
      percent: 100,
      value: [],
      createTime: "",
      senTextList: []
    };
  },
  created() {
    this.id = this.$route.query.id;
    this.GetInfoList(this.id);

    this.getMaterialMicroStatistics();
    this.getAttentionTotalByObjId();
    this.createSenList()
    if (isLogin()) {
      this.getIsAttentionEnt();
      this.getProductList();
    }
  },
  mounted() {
    this.getRouterData()
  },
  methods: {
    // 获取路由参数（锚点跳转）
    getRouterData() {
      let { anchor } = this.$route.query
      if(anchor && anchor !== '') {
        this.$refs[anchor].scrollIntoView()
      }
    },
    createSenList() {
      let senText = require('../../../../assets/other/Sensitive-word.txt')
      this.senTextList = senText.default.split(/\r\n/)
    },
    getProductList() {
      console.log(this.currentEnt);
      let _params = {
        id: this.currentEnt.id,
      };
      getProductList(_params).then((res) => {
        console.log(res.data);
        this.selectType = res.data;
      });
    },
    //导航统计
    getMaterialMicroStatistics() {
      let params = {
        auditStatus: 2,
      };
      getMaterialMicroStatistics(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.endVal = res.data.totalCount;
          this.endVal1 = res.data.notResolveCount;
          // console.log(this.endVal)
        }
      });
    },
    getIsAttentionEnt() {
      getIsAttentionEnt(this.id)
        .then((res) => {
          this.ISguanzhu = res.data;
        })
        .catch((error) => {});
    },
    // 新增关注  取消关注
    async attentionEnt() {
      
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') != 1) {
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。");
          this.$store.commit('setIsSign',true)
               setIsSign(true);
      } else {
        if (this.ISguanzhu == false) {
          let _params = {
            objectId: this.id,
            objectType: 1,
          };
          addAttention(_params)
            .then((res) => {
              if (res.code == 200) {
                this.getAttentionTotalByObjId();
                this.$message.success("关注成功");
                this.ISguanzhu = true;
              }
            })
            .catch((error) => {});
        } else {
          let _params = {
            objectId: this.id,
            objectType: 1,
            operatorType: 1,
          };
          updateAttention(_params)
            .then((res) => {
              console.log(res);
              if (res.code == 200) {
                this.getAttentionTotalByObjId();
                this.$message.success("取关成功");
                this.ISguanzhu = false;
              }
            })
            .catch((error) => {});
        }
      }
      // location.reload();
    },
    async Myneed() {
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') == 1) {
        this.$router.push("/usercenter/RequirementRelease");
      } else {
           this.$store.commit('setIsSign',true)
               setIsSign(true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。");
      }
    },
    async Myproduct() {
      if(!isLogin(true)) return
      if (localStorage.getItem('IsSign') == 1) {
        this.$router.push("usercenter/ProductsRelease");
      } else {
         this.$store.commit('setIsSign',true)
               setIsSign(true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。");
      }
    },
    GetInfoList(id) {
      let params = { id };
      GetInfo(params).then((res) => {
        if (res.code == 200) {
          this.infoList = res.data;
          this.createTime = res.data.createTime.split(" ");
          this.entId = res.data.entId;
          if (isLogin()) {
            //取当前登录企业信息
            this.getEntBaseInfo1();
          }
          // this.getEntBaseInfo();

          //取需求的企业信息
          this.getentBaseInfo(this.entId);

          let Data = res.data.createTime;
          let dateBegin = new Date(Data.replace(/-/g, "/"));
          if (this.infoList.expirationDate) {
            let dateEnd = new Date(); //获取当前时间
            let dateDiff = dateEnd.getTime() - dateBegin.getTime(); //时间差的毫秒数
            let dayDiff = dateDiff / (24 * 3600 * 1000);
            // console.log(dayDiff)
            this.percent =
              (dayDiff / (this.infoList.remainDays + dayDiff + 1)) * 100;
            if (this.percentage > 100) {
              this.percentage = 100;
            }
            // console.log(this.percent)
          } else {
            this.percent = 100;
          }
        }
      });
    },
    getEntBaseInfo1() {
      getEntBaseInfo().then((res) => {
        console.log(res);
        if ((res.code = 200)) {
          this.currentEnt = res.data;
          if (this.currentEnt.id == this.entId) {
            this.isMyProduct = true;
          }
        }
      });
    },
    getentBaseInfo(id) {
      getentBaseInfo(id).then((res) => {
        if ((res.code = 200)) {
          this.BaseList = res.data;
        }
      });
    },
    async showModal() {

      if(!isLogin(true)) return
      if (this.currentEnt.entId == this.infoList.entId) {
        this.$message.warning("对不起，您不能给自己留言，谢谢！");
      } else if (localStorage.getItem('IsSign') != 1) {
         this.$store.commit('setIsSign',true)
               setIsSign(true);
        // this.$message.warning("您需要完成信用承诺函签署再进行该操作。");
      } else {
        this.visible = true;
      }
    },
    //提交按钮
    submit(e) {
      e.preventDefault();
      this.confirmLoading = true;
      this.form.validateFields((err, values) => {
        if (!err) {
          let isSubmit = true
          if(values.textarea){
            for(let i = 0; i < this.senTextList.length; i++) {
              if(values.textarea.includes(this.senTextList[i])) {
                console.log(values.textarea, this.senTextList[i])
                this.$message.warning("您的附言中存在涉黄、涉黑等词汇请修改后再次提交！！！")
                isSubmit = false
                break
              }
            }
          }
          // console.log(values)
          if(isSubmit) {
            setTimeout(() => {
              this.formLine.contact = values.userName;
              this.formLine.phone = values.phone;
              this.formLine.email = values.email;
              this.formLine.productId = this.value.toString();
              this.formLine.verifyCode = values.verifyCode;
              this.formLine.postscript = values.textarea;
              this.AddMessage();
            }, 1000);
          }else {
            this.confirmLoading = false
          }
        } else {
          this.confirmLoading = false;
        }
      });
    },
    //取消按钮
    handleCancel(e) {
      this.sec = 0;
      this.IsDisabled = false;
      console.log("Clicked cancel button");
      // 清空表单
      this.form.resetFields();
      this.visible = false;
    },
    //获取验证码
    getCode() {
      //只校验手机号字段,校验通过才发送短信
      this.form.validateFields(["phone"], (err, values) => {
        if (!err) {
          let params = {
            mobile: values.phone,
            type: 2,
          };
          this.IsDisabled = true;
          const timeout = 60;
          getVerifiyCode(params).then((res) => {
              if (res.code == 200) {
                this.$message.success("短信发送成功,注意查收!");
                this.sec = timeout;
                // 写一个每隔一秒触发的计时器,避免小于0
                let timerID = setInterval(() => {
                  if (this.sec > 0 && this.sec <= timeout) {
                    this.sec--;
                  } else {
                    this.sec = 0;
                    this.IsDisabled = false;
                    clearInterval(timerID);
                  }
                }, 1000);
              }else{
                this.$message.error(res.msg);
                this.IsDisabled = false;
              }
            })
            .catch((error) => {
              this.$message.error('获取验证码失败');
              this.IsDisabled = false;
            });
        }
      });
    },
    AddMessage() {
      let params = {
        objectType: 1,
        objectId: this.id,
        ...this.formLine,
      };
      addMessage(params).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.entList = res.data;
          this.$message.success("提交成功");
          this.confirmLoading = false;
          this.sec = 0;
          this.visible = false;
          // 清空表单
          this.form.resetFields();
        } else {
          this.$message.error(res.msg);
        }
      });
    },
    // 获取关注数
    getAttentionTotalByObjId() {
      getAttentionTotalByObjId(this.id)
        .then((res) => {
          if (res.code == 200) {
            this.EntZZSNum = res.data;
          }
        })
        .catch((error) => {});
    },
    //添加关注
    addAttention() {
      let params = {
        objectType: 1,
        objectId: this.id,
      };
      addAttention(params).then((res) => {
        console.log(res);
      });
      this.getAttentionTotalByObjId();
    },
    //取消关注
    updateAttention() {
      let params = {
        objectType: 1,
        objectId: this.id,
      };
      updateAttention(params).then((res) => {
        console.log(res);
      });
      this.getAttentionTotalByObjId();
    },
  },
  components: {
    countTo,
    breadcrumb,
  },
  watch: {
    value(val) {
      console.log(`selected:`, val);
      this.selectType.map((item) => {
        item.disabled = false;
      });
      if (val.length >= 5) {
        let arr02 = [...this.selectType].filter((x) =>
          [...val].every((y) => y !== x.id + ":" + x.productName)
        );
        console.log(arr02);
        arr02.map((item) => {
          item.disabled = true;
        });
      }
    },
  },
};
</script>

<style lang="less" scoped>
/deep/ .ant-row {
  margin-bottom: 8px;
}
::v-deep .ant-modal-content {
  border-radius: 32px;
  border: solid 6px #188af1;
}
::v-deep .ant-modal-header {
  height: 60px;
  background-color: #2a51bc;
  border-radius: 24px 24px 0px 0px;
  text-align: center;
}
::v-deep .ant-modal-title {
  color: #fff;
  font-size: @font26;
}
::v-deep .ant-modal-footer {
  margin: 0 24px;
}
.top-title {
  text-align: center;
  color: @text-color-303;
  font-size: @font22;
  padding-bottom: 8px;
  border-bottom: 1px solid #e9e9e9;
}
.w {
  width: 1200px;
  margin: 0 auto;
}
.disc {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background-color: @color-188;
  display: inline-block;
  margin-right: 8px;
}
.MaterialDetails {
  background-color: @bg-color-f5f;
  .banner {
    height: 200px;
    background-image: url(../image/banner.png);
    background-size: 100% 100%;

    .banner-text {
      h2 {
        padding: 57px 0 0px;
        font-size: @font36;
        font-weight: 400;
        color: @text-color-606;
        font-family: Source Han Sans CN;
        line-height: 1;
      }
      .banner-span-text {
        margin-top: 22px;

        .Num-text1 {
          span {
            font-family: Arial;
            font-size: 51px;
            color: #072947;
            line-height: 1;
            margin-right: 28px;
          }
        }

        .Num-text2 {
          width: 336px;
          height: 50px;
          line-height: 50px;
          border: 0;
          background: linear-gradient(
            to left,
            rgba(187, 223, 255, 0) 25%,
            rgba(24, 138, 241, 0.5)
          );

          div {
            font-weight: normal;
            &:nth-child(1) {
              margin: 12px 17px 8px 28px;
              height: 30px;
              line-height: 30px;
              font-size: 23px;
              color: #2a51bc;
            }

            &:nth-child(2) {
              margin-top: 6px;
              height: 43px;
              width: 43px;
              line-height: 43px;
              font-family: Arial;
              font-size: 39px;
              color: #2a51bc;
            }
          }
        }
      }
    }
  }

  .nav-box {
    margin: 24px 0;
    height: 56px;
    background-color: #ffffff;
    box-shadow: 0px 6px 20px 0px rgba(24, 138, 241, 0.16);
    border-radius: 6px;

    .nav-text {
      line-height: 56px;
      margin-left: 29px;
      font-size: @font16;
      font-weight: normal;
      color: @text-color-606;

      .nav-Detail {
        color: @color-188;
      }
    }
  }

  .content {
    padding-bottom: 100px;
    .main-left {
      width: 894px;
      margin-right: 24px;
      background-color: #ffffff;
      border-radius: 8px;
      position: relative;
      overflow: hidden;

      .expire {
        width: 162px;
        height: 122px;
        line-height: 200px;
        position: absolute;
        top: -72px;
        left: 0;
        font-size: @font16;
        color: #fff;
        background-color: #2a51bc;
        border-bottom-right-radius: 40%;
      }
      .content-top {
        height: 30px;
        margin: 18px 18px 8px 0;
      }
      .content-title {
        margin: 0 17px 39px 32px;
        padding: 16px;
        // height: 120px;
        background-color: @bg-color-f5f;
        border-radius: 4px;
        text-align: center;

        h2 {
          // padding-top: 26px;
          font-family: Microsoft YaHei;
          font-size: @font26;
          color: @color-2A5;
          margin-bottom: 24px;
        }

        span {
          font-family: Microsoft YaHei;
          font-size: @font16;
          font-weight: normal;
          color: @text-color-606;
        }
      }

      .table-box {
        width: 832px;
        margin-left: 32px;
        margin-bottom: 52px;
        table {
          height: 40px;
          line-height: 40px;
          font-size: @font14;
          th {
            width: 159px;
            padding-left: 20px;
            background-color: #f3f6fe;
            color: @text-color-606;
          }
          td {
            width: 672px;
            padding-left: 20px;
            color: @text-color-303;
          }
        }
      }

      .content-btn {
        border-top: dashed 1px #e4e7ed;
        margin: 0 32px;
        text-align: center;

        .btn-box {
          width: 200px;
          height: 48px;
          margin: 41px 0 104px;
          font-size: @font18;
        }
      }
    }

    .main-right {
      width: 282px;
      .right-top {
        background-color: #fff;
        position: relative;
        overflow: hidden;
        width: 100%;
        height: 360px;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        .expire {
          text-align: center;
          position: absolute;
          width: 100%;
          top: -100px;
          height: 148px;
          line-height: 248px;
          border-radius: 30%;
          background-color: @color-2A5;
          font-size: @font18;
          color: #fff;
        }

        .company {
          margin: 64px 19px 8px;

          div {
            &:nth-child(1) {
              margin-top: 15px;
              width: 160px;
              font-size: @font16;
              color: @text-color-303;
              font-weight: 700;
            }

            &:nth-child(2) {
              width: 80px;
              height: 65px;
              text-align: center;
              img {
                width: auto;
                max-height: 65px;
              }
            }
          }
        }

        .CompanyInformation {
          border-top: solid 1px #ebeef5;
          margin: 0 19px;
          padding-top: 17px;
          ul {
            li {
              font-size: @font14;
              color: @text-color-909;
              line-height: 28px;
              span {
                color: @text-color-606;
              }
            }
          }
        }
      }
      .ant-btn {
        margin-top: 25px;
        height: 48px;
        font-size: @font18;
        border: 0;
        &:nth-child(3) {
          background-color: #0da9b0;
          margin-bottom: 25px;
        }
      }
      .right-footer {
        height: 176px;
        background-color: #fff;
        border-radius: 8px;

        .timeOut {
          padding: 8px 0 86px;
          height: 41px;
          .time-text {
            position: relative;
            img {
              position: absolute;
              left: -10px;
            }
            span {
              text-align: center;
              width: 100px;
              line-height: 41px;
              position: absolute;
              color: #fff;
              font-size: @font18;
              font-weight: 400;
            }
          }

          .line {
            width: 6px;
            height: 41px;
            background-color: #ff9f00;
          }
        }
      }
    }
  }
}
</style>